<template>
  <div id="app">
    <Header></Header>
    <Nav></Nav>
    <!-- 搜索框 -->
    <!-- <div class="top">
      <input type="text" class="search">
      <el-button type="info" round class="btn">点击搜索</el-button>
    </div> -->

    <div class="content1">

      <el-tabs :tab-position="tabPosition" style="height: 400px;margin-left: 260px;">
        <!-- 母婴奶粉 -->
        <el-tab-pane label="母婴奶粉">
          <div class="milk">
            <table style="float: left;display: inline;" class="t1" v-for="(gd, index) in drink" :key="gd.id">
              <td style="float: left;display: inline;"><a href="###"><img v-if="index == 0"
                    src="../assets/shop_drink1.jpg" style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 1" src="../assets/shop_drink2.jpg" style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 2" src="../assets/shop_drink3.jpg" style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 3" src="../assets/shop_drink4.webp" style="width: 181px;height: 138px;float: left;">
                  <img v-if="index == 4" src="../assets/shop_drink5.webp" style="width: 172px;height: 138px;float: left;">
                  <img v-if="index == 5" src="../assets/shop_drink6.jpg"
                    style="width: 142px;height: 138px;float: left;margin-left: 30px;">
                  <div>
                    <p>{{ gd.troduction }}</p>
                    <p>￥{{ gd.price }}
                      <span><el-button @click="drinks(index)" size="small" type="danger" round>加入购物车</el-button></span>
                    </p>
                  </div>

                </a>
              </td>
            </table>
          </div>
        </el-tab-pane>
        <!-- 儿童衣物 -->
        <el-tab-pane label="儿童衣物鞋类">
          <div class="clother">
            <table style="float: left;display: inline;" class="t2" v-for="(sc, index) in clothers" :key="sc.id">
              <td style="float: left;display: inline;"><a href="###"><img v-if="index == 0"
                    src="../assets/shop_clother3.png" style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 1" src="../assets/shop_clothers1_.jpg"
                    style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 2" src="../assets/shop_clother2.jpg"
                    style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 3" src="../assets/shop_clother4.webp"
                    style="width: 181px;height: 138px;float: left;">
                  <img v-if="index == 4" src="../assets/shop_clother5.jpg"
                    style="width: 172px;height: 138px;float: left;">
                  <img v-if="index == 5" src="../assets/shop_clother6.webp"
                    style="width: 172px;height: 138px;float: left;">
                  <div>
                    <p>{{ sc.troduction }}</p>
                    <p>￥<span>{{ sc.price }}</span> <br><el-button @click="clother(index)" size="small" type="danger"
                        round>加入购物车</el-button>
                    </p>
                  </div>

                </a>
              </td>
            </table>
          </div>
        </el-tab-pane>
        <!-- 玩具 -->
        <el-tab-pane label="玩具">
          <div class="toy">
            <table style="float: left;display: inline;" class="t3" v-for="(gt, index) in toy" :key="gt.id">
              <td style="float: left;display: inline;"><a href="###"><img v-if="index == 0" src="../assets/shop_toy1.jpg"
                    style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 1" src="../assets/shop_toy2.webp" style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 2" src="../assets/shop_toy3.webp" style="width: 194px;height: 138px;float: left;">
                  <img v-if="index == 3" src="../assets/shop_toy4.webp" style="width: 181px;height: 138px;float: left;">
                  <img v-if="index == 4" src="../assets/shop_toy5.jpg" style="width: 172px;height: 138px;float: left;">
                  <img v-if="index == 5" src="../assets/shop_toy6.webp" style="width: 172px;height: 138px;float: left;">
                  <div>
                    <p>{{ gt.troduction }}</p>
                    <p>￥<span>{{ gt.price }}</span><br> <el-button @click="toys(index)" size="small" type="danger"
                        round>加入购物车</el-button>
                    </p>
                  </div>

                </a>
              </td>
            </table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'

export default {
  name: 'application_center',
  components: {
    Header,
    Nav,
    Footer
  },
  data() {
    return {
      tabPosition: 'top',
      drink: [],
      clothers: [],
      toy: [],
    }
  },
  mounted() {
    //幼儿奶粉
    this.$axios.get('/api/goods/drink')
      .then(res => {
        this.drink = res.data
      }),
      //幼儿衣物
      this.$axios.get('/api/goods/clothers')
        .then(res => {
          this.clothers = res.data
        }),
      //幼儿衣物
      this.$axios.get('/api/goods/toy')
        .then(res => {
          this.toy = res.data
        })
  },
  methods: {
    // 奶粉
    drinks(index) {
      this.$axios.post('/api/shopcar/addshopcar', { goodsName: this.drink[index].goodsName, price: this.drink[index].price })
        .then(res => {
          alert('添加成功')
        })
    },
    // 衣物
    clother(index) {
      this.$axios.post('/api/shopcar/addshopcar', { goodsName: this.clothers[index].goodsName, price: this.clothers[index].price })
        .then(res => {
          alert('添加成功')
        })
    },
    // 玩具
    toys(index) {
      this.$axios.post('/api/shopcar/addshopcar', { goodsName: this.toy[index].goodsName, price: this.toy[index].price })
        .then(res => {
          alert('添加成功')
        })
    }
  }

}
</script>

<style scoped>
a {
  text-decoration: none;
  color: black;
}

.search {
  width: 300px;
  height: 35px;
  border-radius: 18px 18px;
}

.btn {
  margin-left: -104px;
}

.top {
  margin-left: 550px;
}

.milk,
.clother,
.toy {
  width: 1029px;
  height: 339px;
  border: 1px solid gray;
}

.t1 td,
.t2 td,
.t3 td {
  margin-left: 10px;
  margin-top: 5px;
  float: left;
  display: block;
  width: 312px;
  height: 137px;
  border: 1px solid gray;
}
</style>
